<template>
	<div class="OperationOverview outdiv" v-if="screenAlldata.titleVO">
		<!-- 顶部 -->
		<div class="Overview_top">
			<div class="Overview_top_d1">
				<span>切换运营商</span>
				<!-- <span>全部 <Icon style="color: #00a096" icon="ant-design:down-outlined"></Icon> </span> -->
				<!-- <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus" @change="handleChange">
					<a-select-option value="jack">Jack</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
					<a-select-option value="Yiminghe">yiminghe</a-select-option>
				</a-select> -->
				<a-select ref="select" style="min-width: 100px; margin-left: 20px" size="small" v-model:value="operatorIdValue" @change="operatorIdChange">
					<a-select-option v-for="item in operatorIdList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
				</a-select>
			</div>
			<div class="Overview_top_d2">
				<div class="Overview_top_d2_ones">
					<img src="/@/assets/images/operationoverview/screenshot20240904.png" alt="" />
					<div class="Overview_top_d2_ones_rt">
						<span>充电中</span>
						<span class="bigfont">{{ screenAlldata?.titleVO.chargingNum }} <span class="smafont">辆</span> </span>
					</div>
				</div>
				<div class="Overview_top_d2_ones">
					<img src="/@/assets/images/operationoverview/screenshot20240904.png" alt="" />
					<div class="Overview_top_d2_ones_rt">
						<span>今日充电量</span>
						<span class="bigfont">{{ screenAlldata?.titleVO.todayChargePower }} <span class="smafont">度</span> </span>
					</div>
				</div>
				<!-- <a-divider type="vertical" style="background-color: #969696; width: 2px; height: 60px" /> -->
				<div class="Overview_top_d2_ones d2ones3">
					<div class="Overview_top_d2_ones_rt">
						<span>昨日充电量</span>
						<span class="bigfont">{{ screenAlldata?.titleVO.yesterdayChargePower }} <span class="smafont">度</span> </span>
					</div>
				</div>
				<div class="Overview_top_d2_ones">
					<img src="/@/assets/images/operationoverview/screenshot20240904.png" alt="" />
					<div class="Overview_top_d2_ones_rt">
						<span>实时预警</span>
						<span class="bigfont d2ones4span">{{ screenAlldata?.titleVO.currentAlterNum }} <span class="smafont">个</span> </span>
					</div>
				</div>
				<img class="Overview_top_d2_car" src="/@/assets/images/operationoverview/u2.png" alt="" />
			</div>
			<div class="Overview_top_d3">数据更新时间：{{ screenAlldata?.titleVO.nowTime }}</div>
		</div>
		<!-- 下面大主题 -->
		<div class="Overview_bottom">
			<div class="Overview_bottom_left">
				<div class="Overview_bottom_left_title">
					<span>累计充电统计</span>
					<span
						>全部订单
						<Icon style="color: #00a096; padding-left: 0px" icon="ant-design:right-outlined"></Icon>
					</span>
				</div>

				<div class="Overview_bottom_left_select">
					<a-space>
						<a-select v-model:value="dateType" :size="small">
							<a-select-option value="month">月份</a-select-option>
							<a-select-option value="year">年</a-select-option>
						</a-select>
						<a-date-picker :size="small" :picker="dateType" />
					</a-space>
				</div>
				<div class="Gauge">
					<Gauge :chartData="{name: '充电量', value: 70}" height="300px"></Gauge>
				</div>
				<div class="Overview_bottom_left_d4">
					<a-row :gutter="16">
						<a-col :span="8">
							<div class="Overview_bottom_left_d4_ones">
								<span class="Obld4o_sp1">67.8 <span class="Obld4o_sp2 sp22">万度</span></span>
								<p>5月份充电量</p>
							</div>
						</a-col>
						<a-col :span="8">
							<div class="Overview_bottom_left_d4_ones">
								<span class="Obld4o_sp1">12.8 <span class="Obld4o_sp2">%</span></span>
								<p>环比</p>
								<img src="/@/assets/images/operationoverview/u84.svg" alt="" />
							</div>
						</a-col>
						<a-col :span="8">
							<div class="Overview_bottom_left_d4_ones">
								<span class="Obld4o_sp1">7.8 <span class="Obld4o_sp2">%</span></span>
								<p>同比</p>
								<img class="imgrotate" src="/@/assets/images/operationoverview/u83.svg" alt="" />
							</div>
						</a-col>
					</a-row>
				</div>
				<div class="Overview_bottom_left_d5">
					<div style="text-align: center" class="obld5_top">
						<a-row>
							<a-col :span="8">
								<div>
									<p>充电次数</p>
									<p>1278 次</p>
								</div>
							</a-col>
							<a-col :span="8">
								<div>
									<p>环比</p>
									<p class="type1color">
										1278
										<img class="imgrotate" src="/@/assets/images/operationoverview/u83.svg" alt="" />
									</p>
								</div>
							</a-col>
							<a-col :span="8">
								<div>
									<p>同比</p>
									<p class="type2color">1278 <img src="/@/assets/images/operationoverview/u84.svg" alt="" /></p>
								</div>
							</a-col>
						</a-row>
					</div>

					<div style="text-align: center" class="obld5_bom">
						<a-row>
							<a-col :span="8">
								<div>
									<p>充电次数</p>
									<p>1278 次</p>
								</div>
							</a-col>
							<a-col :span="8">
								<div>
									<p>环比</p>
									<p class="type1color">
										1278
										<img class="imgrotate" src="/@/assets/images/operationoverview/u83.svg" alt="" />
									</p>
								</div>
							</a-col>
							<a-col :span="8">
								<div>
									<p>同比</p>
									<p class="type2color">1278 <img src="/@/assets/images/operationoverview/u84.svg" alt="" /></p>
								</div>
							</a-col>
						</a-row>
					</div>
				</div>
			</div>
			<div class="Overview_bottom_center">
				<OperationOverviewRight1 :screenAlldata="screenAlldata" />
			</div>
		</div>
	</div>
</template>

<script lang="js" name="OperationOverview" setup>
	import {ref, reactive, computed, unref} from 'vue';
	import {useListPage} from '/@/hooks/system/useListPage';
	import {useUserStore} from '/@/store/modules/user';
	import Gauge from '/@/components/chart/Gauge.vue';
	import OperationOverviewRight1 from './OperationOverviewRight.vue';
	import {Statistic} from 'ant-design-vue';
	const dateType = ref('month');
	import {getYunxingAll} from '@/api/screen/yewuapi.js';
	const operatorIdValue = ref('admin'); //充电运营商选择
	const screenAlldata = ref({});

	async function getYunxingAllapi() {
		await getYunxingAll({key: operatorIdValue.value}).then((res) => {
			console.log('getYunxingAll', res);
			screenAlldata.value = Object.assign({}, res);
		});
	}
	function operatorIdChange(value) {
		console.log('operatorIdChange', value);
		getYunxingAllapi();
	}
	import {useYewuStore} from '/@/store/modules/yewu';
	const YewuStor = useYewuStore();
	// 充电站查询列表
	const operatorIdList = ref([]);
	onMounted(() => {
		getYunxingAllapi();
		setTimeout(() => {
			operatorIdList.value = [{value: 'admin', label: '全部'}, ...YewuStor.operatorIdList];
		}, 2000);
	});
</script>

<style lang="less" scoped>
	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	:deep(.ant-divider-horizontal) {
	}

	.Overview_bottom_center {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		width: 100%;
	}

	.outdiv {
		margin: 20px;
	}

	.OperationOverview {
		// 顶部
		.Overview_top {
			background-color: #010c2a;
			box-sizing: border-box;
			padding: 10px 50px;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.Overview_top_d1 {
				font-size: 14px;

				span:nth-of-type(1) {
					color: #697fa2;
				}

				span:nth-of-type(2) {
					margin-left: 10px;
					color: #00a096;
					cursor: pointer;
				}
			}

			.Overview_top_d2 {
				margin: 20px 0;
				display: flex;
				min-width: 1248px;

				.Overview_top_d2_car {
					width: 397px;
					height: 209px;
					width: 397px;
					height: 209px;
					position: absolute;
					right: 85px;
					top: -10px;
				}

				.Overview_top_d2_ones {
					margin-right: 80px;
					display: flex;
					align-items: center;

					img {
						width: 55px;
						height: 55px;
						margin-right: 30px;
					}

					.Overview_top_d2_ones_rt {
						display: flex;
						flex-direction: column;
						font-weight: 400;
						font-style: normal;
						font-size: 24px;
						color: rgb(241, 241, 241);

						.bigfont {
							font-size: 40px;
						}

						.smafont {
							font-size: 12px;
						}
					}
				}

				.d2ones3 {
					// border-left: 2px solid #6a7996;
					padding-left: 20px;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: -9px;
						width: 2px;
						height: 81px;
						background-color: #6a7996;
						transform: translateY(-50%);
					}

					.Overview_top_d2_ones_rt {
						color: #6a7996;
					}
				}

				.d2ones4span {
					color: #ff4c62;
				}
			}

			.Overview_top_d3 {
				color: #697fa2;
				font-size: 14px;
			}
		}

		.Overview_bottom {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			.Overview_bottom_left {
				background: white;
				width: 388px;
				min-width: 388px;
				height: 100%;
				box-sizing: border-box;
				padding: 20px;

				.Overview_bottom_left_title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					span {
						color: #1890ff;
						font-weight: 400;
						font-style: normal;
						font-size: 18px;
					}

					span:nth-of-type(1) {
						position: relative;
						padding-left: 10px;

						&::before {
							content: '';
							width: 4px;
							height: 16px;
							background-color: #00a096;
							position: absolute;
							left: 0;
							top: 6px;
						}
					}

					span:nth-of-type(2) {
						font-size: 12px;
					}
				}

				.Overview_bottom_left_select {
					margin: 10px 0;
				}

				.Overview_bottom_left_d4 {
					.Overview_bottom_left_d4_ones {
						text-align: center;

						img {
							position: absolute;
							right: 8px;
							top: 28px;
						}

						.Obld4o_sp1 {
							font-weight: 400;
							font-style: normal;
							font-size: 28px;
							position: relative;
						}

						.Obld4o_sp2 {
							position: absolute;
							right: -13px;
							top: 0px;
							font-weight: 300;
							font-style: normal;
							font-size: 12px;
							color: #7d8590;
						}

						.sp22 {
							right: -28px;
						}
					}
				}
			}
		}
	}

	.type1color {
		color: #ff9447;
	}

	.type2color {
		color: #30e7bb;
	}

	.imgrotate {
		transform: rotate(180deg);
	}

	.obld5_top {
		border-bottom: 1px solid #c7c7c7;
		padding-bottom: 6px;
		margin-top: 10px;
	}

	.obld5_bom {
		margin-top: 15px;
	}
</style>
